<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left iconfont" @tap="back">
				&#xe614;
			</view>
			<view class="top-bar-center">详情</view>
		</view>
		<view class="main" v-if="uid===id">
			<view class="column">
				<view class="col">
					<view class="column-left">头像</view>
					<view class="column-m">
						<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
						<image :src="cropFilePath" @tap="upload" class="column-m-icon"></image>
						<!-- <image src="../../static/img/four.jpg" class="column-m-icon"></image> -->
					</view>
					<view class="column-right iconfont" @tap="upload">
						&#xe62c;
					</view>
				</view>
				<view class="col" @tap="modify('签名','introduce',user.introduce)">
					<view class="column-left">签名</view>
					<view class="column-m">{{user.introduce}}</view>
					<view class="column-right iconfont">
						&#xe62c;
					</view>
				</view>
				<view class="col">
					<view class="column-left">注册</view>
					<view class="column-m">{{resgiterDate(user.register)}}</view>
				</view>
				<view class="col">
					<view class="column-left">账号</view>
					<view class="column-m">{{user.name}}</view>
				</view>
				<view class="col">
					<view class="column-left">性别</view>
					<picker @change="bindPickerChange" :value="index" :range="sexArray">
						<view class="column-m">{{sexArray[index]}}</view>
					</picker>
					<view class="column-right iconfont">
						&#xe62c;
					</view>
				</view>
				<view class="col">
					<view class="column-left">生日</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="column-m">{{date}}</view>
					</picker>
					<view class="column-right iconfont">
						&#xe62c;
					</view>
				</view>
				<view class="col" @tap="modify('电话','tel',user.tel)">
					<view class="column-left">电话</view>
					<view class="column-m">{{user.tel}}</view>
					<view class="column-right iconfont">
						&#xe62c;
					</view>
				</view>
				<view class="col" @tap="modify('邮箱','mail',user.mail)">
					<view class="column-left">邮箱</view>
					<view class="column-m">{{user.mail}}</view>
					<view class="column-right iconfont">
						&#xe62c;
					</view>
				</view>
				<view class="col" @tap="modify('密码','pwd',user.pwd)">
					<view class="column-left">密码</view>
					<view class="column-m">******</view>
					<view class="column-right iconfont">
						&#xe62c;
					</view>
				</view>
			</view>
			<view class="bt-out" @tap="logout">退出登录</view>
		</view>
		<view class="main" v-if="uid!==id">
			<view class="column">
				<view class="col">
					<view class="column-left">头像</view>
					<view class="column-m">
						<image :src="cropFilePath" class="column-m-icon"></image>
					</view>
				</view>
				<view class="col">
					<view class="column-left">签名</view>
					<view class="column-m">{{user.introduce}}</view>
				</view>
				<view class="col">
					<view class="column-left">注册</view>
					<view class="column-m">{{resgiterDate(user.register)}}</view>
				</view>
				<view class="col">
					<view class="column-left">昵称</view>
					<view class="column-m">{{user.name}}</view>
				</view>
				<view class="col">
					<view class="column-left">性别</view>
					<view class="column-m">{{user.sex}}</view>
				</view>
				<view class="col">
					<view class="column-left">生日</view>
					<view class="column-m">{{user.birth}}</view>
				</view>
				<view class="col">
					<view class="column-left">电话</view>
					<view class="column-m">{{user.tel}}</view>
				</view>
				<view class="col">
					<view class="column-left">邮箱</view>
					<view class="column-m">{{user.mail}}</view>
				</view>
			</view>
			<view class="bt-out"@tap="deleteFriend">删除好友</view>
		</view>
		<view class="modify" :style="{bottom: '-'+mHeight}" :animation="animationData">
			<view class="modify-header">
				<view class="modify-close" @tap="modifyCancel">取消</view>
				<view class="modify-title">{{modifyTitle}}</view>
				<view class="modify-ok" @tap="modifySubmit">确定</view>
			</view>
			<view class="modify-main">
				<textarea v-if="modifyTitle === '密码'" v-model="modifyPwd" class="modify-pwd" placeholder="请输入原密码" placeholder-style="color: #aaa" />
				<textarea v-model="modifyData" class="modify-data" :placeholder="pwdPlaceholder"
				 placeholder-style="color: #aaa" :style="modifyTitle === '密码'?'height: 44rpx;':'height:386rpx'"/>
			</view>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue"
	import tools from "@/commons/js/tools.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				mytoken: undefined,	//用户token
				storageData: '',
				uid: '',		//用户id
				id: '',			//对象id
				user: {},
				sexArray: ['男', '女', '未知'],
				index: 0,
				date: currentDate,
				tempFilePath: '',
				cropFilePath: '',
				headimg: '',
				//修改区域的标题
				modifyTitle: '',
				//修改的类型
				modifytype: '',
				//修改区域的内容
				modifyData: '',
				//修改密码
				modifyPwd: undefined,
				//填写现密码
				pwdPlaceholder:'',
				//弹框动画
				animationData: {},
				//动画开关
				isModify: false,
				//页面高度
				mHeight: ''
			};
		},
		onLoad(e) {
			this.getStorages()
			if(this.mytoken !== undefined){
				this.id = e.id
				this.getUser()
			}
		},
		onShow() {
			try {
			    const value = uni.getStorageSync('user')
			    if (value) {
			        this.storageData = value
			    }
			} catch (e) {
			    // error
			}
			if(!this.storageData.token){
				uni.navigateTo({
					url: '../login/login'
				})
			}else{
				this.getUser()
			}
		},
		onReady() {
			this.getElementStyle()
		},
		components: {
			ImageCropper
		},
		methods: {
			//获取本地缓存
			getStorages: function() {
				try {
				    const value = uni.getStorageSync('user');
				    if (value) {
				        this.uid = value.id
						this.mytoken = value.token
				    }
				} catch (e) {
					//没有缓存跳转到登录页面
				    uni.navigateTo({
				    	url: '../index/index'
				    })
				}
			},
			//获取用户信息
			getUser(){
				uni.request({
					url: this.baseURL+'/user/detail',
					data: {
						id: this.id
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let res = data.data.result
							this.cropFilePath = this.baseURL+res.imgurl
							this.sexJudge(res.sex)
							if(res.introduce === undefined || res.introduce === ''){
								res.introduce = '这个人还没有留下签名'
							}
							if(res.birth === undefined){
								this.date = '0000-00-00'
							}else{
								let birth = tools.birthDate(res.birth)
								this.date = birth
							}
							if(res.tel === undefined || res.tel === ''){
								res.tel = '未知'
							}
							if(res.mail === undefined || res.mail === ''){
								res.mail = '未知'
							}
							this.user = res
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//判断性别
			sexJudge(e){
				if(e == '男'){
					this.index = 0
				}else if(e === '女'){
					this.index = 1
				}else{
					this.index = 2
				}
			},
			//返回上一级
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			//格式化注册时间
			resgiterDate(date) {
				return tools.resgiterDate(date)
			},
			//性别选择器方法
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.updateDate(this.sexArray[this.index],'sex',undefined)
			},
			//日期选择器方法
			bindDateChange: function(e) {
				this.date = e.target.value
				this.updateDate(this.date,'birth',undefined)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//头像裁剪
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			confirm(e) {

				this.tempFilePath = '';
				this.cropFilePath = e.detail.tempFilePath;
				this.headimg = e.detail.tempFilePath;
				
				uni.uploadFile({
					url: this.baseURL+'/files/upload',
					filePath: this.headimg,
					name: 'file',
					fileType: 'image',
					formData:{
						url: 'user',
						name: this.uid
					},//传递参数
					success: (uploadFileRes) => {
						var backstr = uploadFileRes.data;
						//修改本地缓存
						uni.setStorage({
							key: 'user',
							data: {
								'id': this.uid,
								'name': this.user.name,
								'imgurl': backstr,
								'token': this.mytoken
							},
							success: function() {
								
							}
						})
						//自定义操作
						this.updateDate(backstr,'imgurl',undefined)
						
					},
					complete() {},
					fail(e) {}

				});
			},
			cancel() {
				this.tempFilePath = "";
			},
			//修改数据
			updateDate(data,type,pwd){
				uni.request({
					url: this.baseURL+'/user/update',
					data: {
						id: this.uid,
						data: data,
						type: type,
						pwd: pwd
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							if(type === 'pwd'){
								uni.removeStorage({
									key: 'user',
									success:function(res){}
								})
								uni.navigateTo({
									url:'../login/login'
								})
							}
							uni.showToast({
								title: '修改成功!',
								icon: 'none',
								duration: 2000
							})
						}else if(status === 400){
							uni.showToast({
								title: '信息填写错误,修改失败!',
								icon: 'none',
								duration: 2000
							})
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//获取页面高度
			getElementStyle: function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.modify').boundingClientRect(data => {
					this.mHeight = data.height+'px'
				}).exec();
			},
			//修改项目弹框
			modify: function(title,type,data) {
				this.modifyTitle = title
				if(title === '密码'){
					this.pwdPlaceholder = '请输入现密码'
				}else{
					this.pwdPlaceholder = ''
					this.modifyData = data
				}
				this.modifytype = type
				
				this.isModify = !this.isModify
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
				if(this.isModify) {
					animation.bottom(0).step()
				}else{
					animation.bottom("-"+this.mHeight).step()
				}
				this.animationData = animation.export()
			},
			modifySubmit() {
				if(this.modifyData.length>0){
					if(this.modifytype !== 'pwd'){
						this.modifyPwd = undefined
						this.updateDate(this.modifyData,this.modifytype,this.modifyPwd)
						this.user[this.modifytype] = this.modifyData
					}else{
						this.updateDate(this.modifyData,this.modifytype,this.modifyPwd)
					}
					
				}else{
					uni.showToast({
						title: '提交信息不能为空!',
						icon: 'none',
						duration: 2000
					})
				}
				this.modify()
			},
			modifyCancel() {
				this.modify()
			},
			//退出
			logout(){
				uni.removeStorage({
					key: 'user',
					success:function(res){}
				})
				uni.redirectTo({
					url:'../login/login'
				})
			},
			//删除好友
			deleteFriend(){
				uni.showModal({
				    title: '提示',
				    content: '确定删除该好友吗?',
					//要用箭头函数
				    success: (res) => {
				        if (res.confirm) {
				            uni.request({
				            	url: this.baseURL+'/friend/deletefriend',
				            	data: {
				            		uid: this.uid,
				            		fid: this.id
				            	},
				            	method: 'POST',
				            	success: (data) => {
				            		let status = data.data.status
				            		if (status === 200) {
				            			//成功
				            			uni.navigateTo({
				            				url: '../index/index'
				            			})
				            		}else if (status === 500) {
				            			uni.showToast({
				            				title: '服务器发生错误!',
				            				icon: 'none',
				            				duration: 2000
				            			})
				            		}
				            	}
				            })
				        } else if (res.cancel) {}
				    }
				})
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../../commons/css/style.scss';

	.top-bar {
		justify-content: flex-start;
		border-bottom: 1px solid $uni-border-color;
		position: relative;

		.top-bar-left {
			width: 88rpx;
			height: 88rpx;
			line-height: 88rpx;
			padding-left:10rpx;

			image {
				margin: 21rpx 0 0 21rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		.top-bar-center {
			position: absolute;
			padding-top: var(--status-bar-height);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.main {
		padding-top: 68rpx;
		display: flex;
		flex-direction: column;

		.column {
			display: flex;
			flex-direction: column;

			.col {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid $uni-border-color;

				.column-left {
					padding-left: 30rpx;
					font-size: $uni-font-size-lg;
					line-height: 112rpx;
				}

				.column-m {
					padding: 0 30rpx;
					font-size: $uni-font-size-lg;
					color: $uni-text-color-grey;
					height: 112rpx;
					line-height: 112rpx;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.column-m-icon {
						width: 104rpx;
						height: 104rpx;
					}


				}

				.column-right {
					padding-right: 30rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				uni-picker {
					flex: 1;
				}
			}
		}

		.bt-out {
			line-height: 88rpx;
			margin-top: 100rpx;
			font-size: $uni-font-size-lg;
			text-align: center;
			color: red;
		}
	}
	// 修改弹框
	.modify {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 1000;
		background-color: #FFFFFF;
		.modify-header {
			width: 100%;
			height: 88rpx;
			border-bottom: 1px solid $uni-border-color;
			padding-top: var(--status-bar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			.modify-close {
				font-size: $uni-font-size-lg;
				line-height: 44rpx;
				padding-left: 32rpx;
			}
			.modify-title {
				line-height: 88rpx;
			}
			.modify-ok{
				font-size: $uni-font-size-lg;
				line-height: 44rpx;
				color: #73d5ff;
				padding-right: 32rpx;
			}
		}
		.modify-main {
			display: flex;
			padding: $uni-spacing-col-lg;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;
			.modify-data {
				flex: 1;
				height: 386rpx;
				border-radius: $uni-border-radius-base;
				padding: 16rpx 20rpx;
				background-color: $uni-bg-color-grey;
			}
			.modify-pwd {
				width: 100%;
				height: 44rpx;
				border-radius: $uni-border-radius-base;
				padding: 16rpx 20rpx;
				margin-bottom: 44rpx;
				background-color: $uni-bg-color-grey;
			}
		}
	}
</style>
